﻿@namespace MudBlazor.Docs.Examples
<style>    
    .example-scroll-to-top-visible {
        font-size: 20px;
        transition: all 1s;       
        bottom: 10px;
        left:8px;
    }
    .example-scroll-to-top-hidden {       
        visibility: hidden;
        transition: all 1s;
        bottom:10px;
        left:-100%;
    }

    .example-custom-button {
        padding: 12px 24px;
        border-radius: 4px;
        background-color: #ff9800;
        box-shadow: var(--mud-elevation-24);
    }
</style>

<div class="example-scroll-section" id="another_unique_identifier">
    <MudPaper Elevation="2" Class="example-inner-section">
        <h1>Scroll inside this container</h1>
        <h2>Some initial long text</h2>
        <h2>Middle text</h2>
        <h2>Bottom text</h2>
        <MudScrollToTop TopOffset="100"
                     Style="z-index:2001"
                     VisibleCssClass="example-scroll-to-top-visible"
                     HiddenCssClass="example-scroll-to-top-hidden "
                     Selector="#another_unique_identifier">
            <div class="example-custom-button">Scroll to top container 2 😎</div>
        </MudScrollToTop>
    </MudPaper>
</div>

@code{ Color Color = Color.Success;
    private void OnScroll(ScrollEventArgs e)
    {
        Color = (e.FirstChildBoundingClientRect.Top * -1) switch
        {
            var x when x < 500 => Color.Primary,
            var x when x < 1500 => Color.Secondary,
            var x when x < 2500 => Color.Tertiary,
            _ => Color.Error
        };
    } }